<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <%@include file="/res/include/base-head.jsp"%>
	<%@include file="/res/include/jquery-easyui.jsp"%>
	<%@include file="/res/include/umeditor.jsp"%>
	<script type="text/javascript" src="${pageContext.request.contextPath}/res/js/mall/product.js"></script>
  </head>
  <body>

    <form id="data-form">      
    <div class="page_title clearfix">
    	<h2>编辑产品</h2>
    </div>
 <input type="hidden" name="id" value="${mallProductVo.id }"/>
<div class="form_item artwork_add">
		 <dl>
	        <dt>分类：</dt>
	        <dd id="category">
	        	<c:if test="${!empty mallProductVo}">
	        		<span id="editCategory">
		        		<c:forEach var="parentCategory" items="${allParentCategory}" varStatus="status">
				    		${parentCategory.name }<c:if test="${!status.last}">-</c:if>
				    	</c:forEach>
	        		 （点击可更改）</span>
			    	<select class="hide" id="category_1" onchange="getChildrenCategory(this.value,1)">
						<option value="">--请选择--</option>
			        	<c:forEach var="categoryVo" items="${firstCategoryVoList}">
			        		<option value="${categoryVo.categoryId }">${categoryVo.name }</option>
			        	</c:forEach>
					</select>
			    </c:if>
	        </dd>
	    </dl>
       <c:choose>
	   <c:when test="${mallShopVo.type == 1}">
	       <dl>
	       	<dt>品牌：</dt>
	           <dd>
					<select class="txt grid-20" name="brandId" id="brand">
						<option value="">--请选择--</option>
			        	<c:forEach var="brandVo" items="${brandList}">
			        		<option value="${brandVo.id }" <c:if test="${mallProductVo.brandId==brandVo.id }">selected</c:if> >    		
			        		${brandVo.firstLetter }-${brandVo.name }</option>
			        	</c:forEach>
					</select>
	           </dd>
	       </dl>
	       <dl>
	       	<dt>供应商：</dt>
	           <dd>
	           		<select class="txt grid-20" name="supplierId">
						<option value="">--请选择--</option>
			        	<c:forEach var="supplierVo" items="${supplierList}">
			        		<option value="${supplierVo.id }" <c:if test="${mallProductVo.supplierId==supplierVo.id }">selected</c:if>>
			        		${supplierVo.firstLetter }-${supplierVo.name }</option>
			        	</c:forEach>
					</select>
	           </dd>
	       </dl>	
       </c:when>
       <c:otherwise>
	       <dl>
	       		<dt>品牌：</dt>
	       		<dd>
	       		    <input type="hidden" name="brandId" value="0"/>
	       		    <input type="hidden" name="supplierId" value="0"/>
	       			<input type="text" class="txt grid-15 easyui-validatebox" name="brandName" data-options="required:true" maxlength="64" value="${mallProductVo.brandName }"/>
	       		</dd>
	       </dl>
       </c:otherwise>
       </c:choose>
       <dl>
       		<dt>产品名称：</dt>
       		<dd>
       			<input type="text" class="txt grid-59 easyui-validatebox" name="name" data-options="required:true" maxlength="64" value="${mallProductVo.name }"/>
       		</dd>
       </dl>
       <dl>
           	<dt>属性描述：</dt>
            <dd>
				<p>
					<textarea class="txt grid-75" id="subtitle" name="subtitle" oninput="admin.product.netMsgChange('subtitle',200)" onpropertychange="admin.product.netMsgChange('subtitle',200)" rows="3">${mallProductVo.subtitle }</textarea>
				</p>
	            <em class="p0">(<span id="resume_txt">200个字以内，还可以输入200个字</span>)</em>
            </dd>
       </dl>
       <dl>
       		<dt>单位：</dt>
       		<dd>
       			<input type="text" class="txt grid-15 easyui-validatebox" name="unit" data-options="required:true" maxlength="20" value="${mallProductVo.unit }"/>
       		</dd>
       </dl>
       <dl>
            <dt>上下架：</dt>
            <dd>
            	<span class="check_txt"><input type="radio" name="status" value="1" <c:if test="${mallProductVo.status==1}">checked="checked"</c:if>/><label>上架</label></span>
                <span class="check_txt"><input type="radio" name="status" value="2" <c:if test="${mallProductVo.status==2}">checked="checked"</c:if>/><label>下架</label></span>
                <span class="check_txt"><input type="radio" name="status" value="3" <c:if test="${mallProductVo.status==3}">checked="checked"</c:if>/><label>失效</label></span>
            </dd>
       </dl>
       <dl>
            <dt>规格：</dt>
            <dd>
               <input value="新增规格" class="icon_serach" onclick="addSpec();" type="button"/>(商品只有一种，且颜色或规格为空时可输入N代替，否则必须填写颜色规格数据)
            </dd>
       </dl>
       <div id="specList"> 
       <c:forEach items="${mallProductVo.productSpecLst}" var="productSpec" varStatus="status">
       <dl>
            <input type="hidden" name="idArray" value="${productSpec.id }"/>
       		<dt></dt>
       		<dd>
       			颜色：<input type="text" class="txt grid-15 easyui-validatebox" name="colorArray" <c:choose><c:when test="${productSpec.color ==''}">value="N"</c:when><c:otherwise>value="${productSpec.color}"</c:otherwise></c:choose>  data-options="required:false" maxlength="20"/> 
       			规格：<input type="text" class="txt grid-15 easyui-validatebox" name="specNameArray" <c:choose><c:when test="${productSpec.specName ==''}">value="N"</c:when><c:otherwise>value="${productSpec.specName}"</c:otherwise></c:choose> data-options="required:false" maxlength="32"/>
       			销售价：<input type="text" class="txt grid-15 easyui-validatebox" name="priceArray" value="${productSpec.price}" data-options="required:true" maxlength="20"/>
       			市场价：<input type="text" class="txt grid-15 easyui-validatebox" name="marketPriceArray" value="${productSpec.marketPrice}" data-options="required:true" maxlength="20"/>
       			库存：<input type="text" class="txt grid-15 easyui-validatebox" name="stockArray" value="${productSpec.stock}" data-options="required:true" maxlength="20"/>
       		    <input value="删除规格" class="icon_serach" onclick="delSpec(this, ${productSpec.id});" type="button"/>
       		</dd>
       </dl>
       </c:forEach>
       </div>
       <dl>
            <dt>是否推荐：</dt>
            <dd>
            	<span class="check_txt"><input type="radio" name="isRecommend" value="2" <c:if test="${mallProductVo.isRecommend==2}">checked="checked"</c:if>/><label>不推荐</label></span>
                <span class="check_txt"><input type="radio" name="isRecommend" value="1" <c:if test="${mallProductVo.isRecommend==1}">checked="checked"</c:if>/><label>推荐</label></span>
            </dd>
       </dl>
       <dl>
       		<dt>推荐排序：</dt>
           	<dd><input type="text" class="txt grid-15 easyui-numberbox" precision="0" name="recommendOidx" data-options="required:true" value="${mallProductVo.recommendOidx }"/></dd>
       </dl>
       <dl>
           	<dt>商品介绍：</dt>
            <dd>
				<p>
					<textarea class="txt grid-75" id="resume" name="resume" oninput="admin.product.netMsgChange('resume',360)" onpropertychange="admin.product.netMsgChange('resume',360)" rows="4">${mallProductVo.resume }</textarea>
				</p>
	            <em class="p0">(<span id="resume_txt">360个字以内，还可以输入360个字</span>)</em>
            </dd>
       </dl>
       <dl>
       	<dt>产品图片：</dt>
           <dd>
           	<ul class="product_imglist img_imglist">
           		<c:set var="imgCount" value="1" />
           		<c:forTokens items="${mallProductVo.img}" delims=";" var="img" varStatus="status"> 
           			<c:set var="imgCount" value="${status.count}" />
           			<li>
           			<a href="javascript:;" class="item" id="pic${status.index+1}" onclick="admin.product.addImg('pic${status.index+1}')"><p class="img"><img src="http://file.xfquanquan.com${img }" alt="" /></p></a>
           			<em onclick="delPic(this,${status.index+1})"></em>
           			</li>
           		</c:forTokens>
           		<c:forEach begin="${imgCount}" end="6" step="1" varStatus="i">
           			<li><a href="javascript:;" class="item" id="pic${i.index+1+imgCount}" onclick="admin.product.addImg('pic${i.index+1+imgCount}')">添加图片</a></li>
           		</c:forEach>
            </ul>
            <em class="p0">上传JPG/PNG/BMP图片，建议650px宽度</em>
           </dd>
       </dl>
       <dl>
       	<dt>介绍图片：</dt>
           <dd>
           	<ul class="product_imglist resumeImg_imglist">
           		<c:set var="rImgCount" value="1" />
           		<c:forTokens items="${mallProductVo.resumeImg}" delims=";" var="rImg" varStatus="status"> 
           			<c:set var="rImgCount" value="${status.count}" />
           			<li>
           			<a href="javascript:;" class="item" id="resumeImg${status.index+1}" onclick="admin.product.addImg('resumeImg${status.index+1}')"><p class="img"><img src="http://file.xfquanquan.com${rImg }" alt="" /></p></a>
           			<em onclick="delResumeImg(this,${status.index+1})"></em>
           			</li>
           		</c:forTokens>
           		<c:forEach begin="${rImgCount}" end="10" step="1" varStatus="i">
           			<li><a href="javascript:;" class="item" id="resumeImg${i.index+1+rImgCount}" onclick="admin.product.addImg('resumeImg${i.index+1+rImgCount}')">添加图片</a></li>
           		</c:forEach>
            </ul>
            <em class="p0">上传4:3的JPG/PNG/BMP图片，建议：720*540px</em>
           </dd>
       </dl>
       <p class="page_btn"><input type="button" value="保存" class="btn_blue" onclick="doSave();"/></p>
   </div>
    </form>
<script type="text/javascript">
var qlevel = 1;

$(document).ready(function() {
	<c:if test="${!empty mallProductVo}">
		$('#editCategory').click(function(){
			$('#editCategory').hide();
			$('#category_1').show();
		});
		//$('#category_1').hide();
	</c:if>
});

function getChildrenCategory(parentId,level) {
	if (parentId != "") {
		for (var i = (level+1); i <= qlevel; i++) {
			$('#category_'+i).remove();
		}
		qlevel = level;
		var data = {parentId:parentId}
		$.post(contextPath+'/mall/category/findChildren',data,function(result) {
			if(result.code==1) {
				if (result.map.childrenList && result.map.childrenList.length > 0) {
					qlevel = level + 1;
					var childrenList = result.map.childrenList;
					var html = [];
					html.push('<select class="txt" id="category_'+qlevel+'" onchange="getChildrenCategory(this.value,'+qlevel+')">');
					html.push('<option value="">请选择</option>');
					for (var i = 0; i < childrenList.length; i++) {
						html.push('<option value="'+childrenList[i].categoryId+'">'+childrenList[i].name+'</option>');
					}
					html.push('</select>');
					$('#category').append(html.join(""));
				}
			}
		});
		var datatow = {categoryId:parentId}
		$.post(contextPath+'/mall/brand/getByCategoryId',datatow,function(result) {
			if(result.code==1) {
				if (result.map.brandList && result.map.brandList.length > 0) {
					qlevel = level + 1;
					var brandList = result.map.brandList;
					var html = [];
					for (var i = 0; i < brandList.length; i++) {
						html.push('<option value="'+brandList[i].id+'">'+brandList[i].firstLetter + '-' + brandList[i].name+'</option>');
					}
					$('#brand').html(html.join(""));
				} else {
					$('#brand').html('<option value="">请选择</option>');
				}
			} else {
				$('#brand').html('<option value="">请选择</option>');
			}
		});
	}
}

var isSave = false;
//提交保存
function doSave(){
	var img = "";
	var imglist = $(".img_imglist img");
	if (imglist && imglist.length > 0) {
		imglist.each(function(){
		    if (img == "") {
		    	img += $(this).attr("src").replace(imgFilePath,"");
		    } else {
		    	img += ";" + $(this).attr("src").replace(imgFilePath,"");
		    }
		});
	} else {
		top.showInfo('请上传产品图片');
		return;
	}
	var resumeImg = "";
	var resumeImglist = $(".resumeImg_imglist img");
	if (resumeImglist && resumeImglist.length > 0) {
		resumeImglist.each(function(){
		    if (resumeImg == "") {
		    	resumeImg += $(this).attr("src").replace(imgFilePath,"");
		    } else {
		    	resumeImg += ";" + $(this).attr("src").replace(imgFilePath,"");
		    }
		});
	}
	var url = contextPath+'/mall/product/update';
	var lastCategory = $('#category').find('select:last');
	if(!$('#data-form').form('validate')) return;
	if (isSave) {
		return;
	}
	isSave = true;
	var data = $('#data-form').form('jsonObject');
	if (lastCategory) {
		var selectCategory = $(lastCategory).val();
		if(selectCategory){
			data.categoryId = selectCategory;
		}else{
			data.categoryId = '${mallProductVo.categoryId}'; 
		}
	}
	data.img = img;
	data.resumeImg = resumeImg;
	//console.info("------------:"+JSON.stringify(data));
	
	//规格数据
	var productSpecLst = [];
	var ids = data.idArray;
	var colors = data.colorArray;
	var specNames = data.specNameArray;
	var stocks = data.stockArray;
	var prices = data.priceArray;
	var marketPrices = data.marketPriceArray;
	//stocks必填，如果stocks不是数组
	if(stocks instanceof Array){
		if(stocks.length <= 5){
			for(var i=0;i<stocks.length;i++){
				productSpecLst[i] = {"id":ids[i], "color":colors[i],"specName":specNames[i],"stock":stocks[i], "price":prices[i],"marketPrice":marketPrices[i]};
			}
		}else{
			top.showInfo('最多支持5个规格');
			return;
		}
	}else{
		productSpecLst[0] = {"id":ids, "color":colors,"specName":specNames,"stock":stocks, "price":prices,"marketPrice":marketPrices};
	}
	
	data.productSpecLst = productSpecLst;
	$.postJson(url,data,function(result) {
		if(result.code==1) {
			top.showInfo('保存成功');
			isSave = false;
		} else {
			isSave = false;
			top.showInfo('保存失败:'+result.msg);
		}
	},'json');
}

function delPic(obj,index){
	$(obj).closest('li').html('<a href="javascript:;" class="item" id="pic'+index+'" onclick="admin.product.addImg(\'pic'+index+'\')">添加图片</a>');
}
function delResumeImg(obj,index){
	$(obj).closest('li').html('<a href="javascript:;" class="item" id="resumeImg'+index+'" onclick="admin.product.addImg(\'resumeImg'+index+'\')">添加图片</a>');
}

function addSpec(){
	var html = [];
    html.push('<input type="hidden" name="idArray"/><dl><dt></dt><dd>');
    html.push('颜色：<input type="text" class="txt grid-15 easyui-validatebox" name="colorArray" value="N" data-options="required:false" maxlength="20"/> ');
    html.push('规格：<input type="text" class="txt grid-15 easyui-validatebox" name="specNameArray" value="N" data-options="required:false" maxlength="20"/> ');
    html.push('销售价：<input type="text" class="txt grid-15 easyui-validatebox" name="priceArray" data-options="required:true" maxlength="20"/> ');
    html.push('市场价：<input type="text" class="txt grid-15 easyui-validatebox" name="marketPriceArray" data-options="required:true" maxlength="20"/> ');
    html.push('库存：<input type="text" class="txt grid-15 easyui-validatebox" name="stockArray" data-options="required:true" maxlength="20"/>');
    html.push('<input value="删除规格" class="icon_serach" onclick="delSpec(this,0);" type="button"/></dd><dl>');
	$('#specList').append(html.join(''));
}

function delSpec(obj,id){
	if(id != 0){
		var msg = "确定删除商品规格?";
		$.messager.confirm('信息提示', msg, function (success) {
			if (!success) {
				return;
			}
			$.postJson(contextPath+'/mall/product/spec/doDelete',{id:id},function(result) {
				if(result.code==1) {
					top.showInfo('删除成功');
					$(obj).closest("dl").remove();
				} else {
					isSave = false;
					top.showInfo('删除失败:'+result.msg);
				}
			},'json');
		});
	}else{
		$(obj).closest("dl").remove();
	}
}
</script>
  </body>
</html>